<template>
    <div>
        <cjc-nav title="支付" @customRouter="customRouter"></cjc-nav>
        <div style="margin-top:50px;">
            <div class="payPrintHeader">
                <div class="payPrintHeaderTop">
                    您需要支付
                </div>
                <div class="payPrintHeaderContent">
                    <span style="font-size:20px;">￥</span><span style="font-size:40px;">6.0</span>
                </div>
                <div class="payPrintHeaderBottom">
                    <ul>
                        <li><div class="countNum">单价</div><div class="priceNum">1元</div></li>
                        <li><div class="countNum">页数</div><div class="priceNum">6页</div></li>
                        <li><div class="countNum">份数</div><div class="priceNum">6份</div></li>
                    </ul>
                </div>
            </div>
            <div class="payPrintContent">
                <div class="payPrintContentContent1">选择支付方式</div>
                <div class="payPrintContentBottom1">
                    <div class="payPrintContentAlipay"><img src="static/images/支付宝logo.png" width="60px" height="60px">支付宝</div>
                    <div class="payPrintContentWechat"><img src="static/images/微信logo.png" width="60px" height="60px">微信</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'home',
    created() {},
    data() {
        return {
        }
    },
    methods: {
        customRouter() {
            // ll
        },
        loading() {
            const msg = this.$Message.loading({
                top: 200,
                content: '正在确认中',
                duration: 0
            })
            setTimeout(msg, 100000)
        },
    },
    components: {
        // cjcNav: () => import('@/components/common/Nav.vue'),
    }
}
</script>

<style lang="less">
.payPrintHeader {
    width: 100%;
    height: 150px;
    background: linear-gradient(
        left,#4fadff,#00f3f5
    );
    .payPrintHeaderTop {
        text-align:center;
        font-size:15px;
        color:white;
        padding-top:10px;
    }
    .payPrintHeaderContent {
        width: 100%;
        height: 70px;
        text-align: center;
        color: white;
        line-height: 70px;
    }
    .payPrintHeaderBottom {
        width: 100%;
        height: 40px;
        ul {
            height: 100%;
            width: 100%;
            text-align: center;
            li {
                height: 100%;
                display: inline-block;
                padding: 20px 15px 0px 15px;
                .countNum {
                    width: 35px;
                    height: 15px;
                    border-radius: 8px;
                    background-color: white;
                    text-align: center;
                    color: #25ccfe;
                    float: left;
                }
                .priceNum {
                    width: 30px;
                    height: 18px;
                    color: #fff;
                    text-align: center;
                    float: left;
                }
            }
        }
    }
}
.payPrintContent {
    height: 320px;
    .payPrintContentTop {
        height: 60px;
        width: 60px;
        float: right;
    }
    .payPrintContentBottom {
        text-align: center;
        width: 100%;
        font-size: 15px;
        color: #818181;
    }
    .payPrintContentContent1 {
        text-align: center;
        width: 100%;
        height: 80px;
        line-height: 80px;
        font-size: 15px;
        // background-color: yellow;
    }
    .payPrintContentBottom1 {
        width: 100%;
        height: 220px;
        text-align: center;
        padding: 15px;
        .payPrintContentAlipay {
            display: inline-block;
            width: 60px;
            height: 60px;
            margin: 0px 30px;
            color: #818181;
        }
        .payPrintContentWechat {
            display: inline-block;
            width: 60px;
            height: 60px;
            margin: 0px 30px;
            color: #818181;
        }
    }
}
</style>
